<template>
	<view class="index-page">
		<view class="title">首页</view>
		<view class="main">
			<!-- 	<view class="search-box">
				<u-search placeholder="请输入您要搜索的饰品" @search="search" shape="square" :showAction="false"
					v-model="searchText"></u-search>
			</view> -->
			<announcement :bgColor="bgColor"></announcement>
			<swiperWapper></swiperWapper>
			<view class="list-box">
				<view class="title">
					<view class="text">最新上架</view>
					<view class="more" @click="more">
						更多>
					</view>
				</view>
				<view class="list-item" v-for="(item,index) in listData" :key="index"
					@click="go_detailType(item,index)">
					<view class="image-box">
						<view class="img" :style="{ backgroundImage: 'url(' + item.itemIcon + ')' }">

						</view>
					</view>
					<view class="info">
						<view class="name">{{item.itemName}}</view>
						<view class="msg">
							<view class="price">￥{{item.consultPrice}}</view>
							<view class="num" v-if="item.num<1000">{{item.num}}件在售</view>
							<view class="num" v-else>1000+件在售</view>
						</view>
					</view>
				</view>
			</view>
			<view class="ICP">
				{{ICPText}}
			</view>
		</view>
		<qq></qq>
		<tabbar current="0"></tabbar>
	</view>
</template>

<script>
	import {
		http
	} from '@/api/index.js'
	import tabbar from '../../components/tabbar.vue';
	import announcement from '../../components/announcement.vue';
	import swiperWapper from '../../components/swiper.vue';
	import qq from '../../components/qq.vue';
	export default {
		data() {
			return {
				searchText: '',
				listData: [],
				ICPText: "",
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E"
			}
		},
		components: {
			tabbar,
			announcement,
			swiperWapper,
			qq
		},
		onShow() {
			this.getList()
			this.getDescribe()
			this.getSetting()
		},
		methods: {
			//获取网站配置
			getSetting() {
				http.post('/api/index/getSetting').then(res => {
					document.documentElement.style.setProperty('--bg-color', res.theme_color);
					document.documentElement.style.setProperty('--text-color', res.font_color);
					this.ICPText = res.copyRight
				}).catch(err => {
					console.log(err);
				})
			},
			//各类说明
			getDescribe() {
				http.post('/api/index/describe').then(res => {}).catch(err => {
					console.log(err.data.data);
				})
			},
			//用户按回车键，或者手机键盘右下角的"搜索"键时触发
			search() {
				console.log(this.searchText);
			},
			getList() {
				http.post('/api/index/jewelry', {
					page: 1,
					limit: 20
				}).then(res => {
					this.listData = res;
				})
			},
			//饰品种类页
			go_detailType(item, index) {
				uni.navigateTo({
					url: "/pages/market/detailType/detailType?id=" + item.id
				})
			},
			//更多
			more() {
				uni.navigateTo({
					url: "/pages/market/market"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	:root {
		--bg-color: ;
		--text-color: ;
	}

	.index-page {
		width: 100%;
		height: 100vh;
		background-color: var(--bg-color);
		color: var(--text-color);
		position: relative;
		margin: auto;

		>.title {
			width: 95%;
			height: 80rpx;
			line-height: 100rpx;
			font-weight: bold;
			font-size: 36rpx;
			margin: auto;
		}

		.main {
			width: 95%;
			height: calc(100% - 220rpx);
			margin: auto;
			overflow-y: scroll;

			.search-box {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;

				.sift {
					width: 45rpx;
					height: 45rpx;
					margin-left: 30rpx;
					background-image: url("../../static/index/sift.svg");
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
				}
			}

			.list-box {
				width: 100%;
				height: auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.title {
					width: 100%;
					height: 80rpx;
					line-height: 100rpx;
					margin: auto;
					display: flex;
					justify-content: space-between;

					.text {
						font-weight: bold;
						font-size: 36rpx;
					}

					.more {
						font-size: 26rpx;
						color: #999999;
					}
				}

				.list-item {
					width: 48%;
					height: 350rpx;
					margin-top: 30rpx;
					display: flex;
					flex-direction: column;
					box-sizing: border-box;

					.image-box {
						width: 100%;
						height: 230rpx;
						background-image: radial-gradient(#969696, #4c4c4c);
						display: flex;
						justify-content: center;
						align-items: center;

						>.img {
							width: 70%;
							height: 70%;
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
						}
					}

					.info {
						width: 100%;
						height: 120rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.name {
							font-size: 28rpx;
							white-space: nowrap;
							font-weight: bold;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.msg {
							display: flex;
							justify-content: space-between;

							.price {
								color: #EEA20E;
								font-weight: bold;
								font-size: 28rpx;
							}

							.num {
								font-size: 26rpx;
								color: #959595;
								font-weight: bold;
							}
						}
					}
				}
			}

			.ICP {
				width: 100%;
				height: 100rpx;
				font-size: 34rpx;
				color: var(--text-color);
				text-align: center;
				line-height: 100rpx;
			}
		}
	}
</style>